// src/components/admin/AddProduct.tsx
import { Button, Form, Input, message, Select, Upload } from 'antd'
import React, { useEffect, useState } from 'react'
import Layout from '../core/Layout'
import { UploadOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'
import { RcFile } from 'antd/lib/upload'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'
import axios from 'axios'
import { API } from '../../config'

const AddProduct = () => {
    const dispatch = useDispatch()
    const [file, setFile] = useState<RcFile>()

    const category = useSelector<AppState, CategoryState>(state => state.category)

    useEffect(() => {
        dispatch(getCategory())
    }, [])

    const { user, token } = isAuth() as Jwt

    const onFinish = (product: any) => {
        const formData = new FormData()
        // 添加商品数据
        for (let attr in product) {
            formData.set(attr, product[attr])
        }
        if (typeof file !== 'undefined') {
            formData.set('photo', file)
        }

        // 发起请求
        axios.post(`${API}/product/create/${user._id}`, formData, {
            headers: {
                "Authorization": `Bearer ${token}`
            }
        }).then(() => {
            message.success('商品添加成功')
        }, () => {
            message.error('商品添加失败')
        })
    }

    const AddProductForm = () => {
        const props = {
            // 限制文件类型为图片
            accept: "image/*",
            // 阻止默认的图片上传
            beforeUpload: function (file: RcFile) {
                setFile(file)
                return false
            }
        }
        return (
            <Form onFinish={onFinish} initialValues={{category: ''}}>
                <Form.Item>
                    <Upload {...props}>
                        <Button icon={<UploadOutlined />}>商品封面</Button>
                    </Upload>
                </Form.Item>
                <Form.Item name="name" label="商品名称">
                    <Input />
                </Form.Item>
                <Form.Item name="description" label="商品描述">
                    <Input />
                </Form.Item>
                <Form.Item name="price" label="商品价格">
                    <Input />
                </Form.Item>
                <Form.Item name="category" label="所属分类">
                    <Select>
                        {
                            category.category.result.map(item => (
                                <Select.Option value={item._id} key={item._id}>{item.name}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="quantity" label="商品数量">
                    <Input />
                </Form.Item>
                <Form.Item name="shipping" label="是否需要运输">
                    <Select>
                        <Select.Option value="1">是</Select.Option>
                        <Select.Option value="2">否</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">添加商品</Button>
                </Form.Item>
            </Form>
        )
    }

    return (
        <Layout title="添加商品" subTitle="">
            { AddProductForm() }
        </Layout>
    )
}

export default AddProduct